<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/reset.css">
</head>
<body>
    <div id="graph"></div>
 
    <script src="js/g6.js"></script>
    <script>
        window.onload = function(){

            // const data = {
            // // 点集
            // nodes: [
            //     {
            //         id: 'node1',
            //         x: 100,
            //         y: 200,
            //     },
            //     {
            //         id: 'node2',
            //         x: 300,
            //         y: 200,
            //     },
            // ],
            // // 边集
            // edges: [
            //     // 表示一条从 node1 节点连接到 node2 节点的边
            //     {
            //         source: 'node1',
            //         target: 'node2',
            //     },
            // ]
            // };
            const data = {
                nodes: [
                    {
                    id:    '1',
                    label: 'alps_file1',
                    },
                    {
                    id:    '2',
                    label: 'alps_file2',
                    },
                    {
                    id:    '3',
                    label: 'alps_file3',
                    },
                    {
                    id:    '4',
                    label: 'sql_file1',
                    },
                    {
                    id:    '5',
                    label: 'sql_file2',
                    },
                    {
                    id:    '6',
                    label: 'feature_etl_1',
                    },
                    {
                    id:    '7',
                    label: 'feature_etl_1',
                    },
                    {
                    id:    '8',
                    label: 'feature_extractor',
                    },
                ],
                edges: [
                    {
                    source: '1',
                    target: '2',
                    },
                    {
                    source: '1',
                    target: '3',
                    },
                    {
                    source: '2',
                    target: '4',
                    },
                    {
                    source: '3',
                    target: '4',
                    },
                    {
                    source: '4',
                    target: '5',
                    },
                    {
                    source: '5',
                    target: '6',
                    },
                    {
                    source: '6',
                    target: '7',
                    },
                    {
                    source: '6',
                    target: '8',
                    },
                ],
            };
            const graph = new G6.Graph({
                /* 画布容器 */
                container: 'graph',
                // 画布宽高
                width: window.innerWidth,
                height: window.innerHeight,
                layout: {
                    type: 'dagre',
                },
                defaultNode:{
                    type: 'rect'
                },
                // 默认边集
                defaultEdge:{
                    type: 'polyline'
                },
                fitView: true
            });
            
            // 读取数据
            graph.data(data);

            // 渲染图
            graph.render();
        }
    </script>
</body>

</html>